<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="box">

      <el-table ref="singleTable" :data="tableData" highlight-current-row border stripe style="width: 100%">
        <el-table-column property="id" width="50">
        </el-table-column>
        <el-table-column property="authName" label="权限名称">
        </el-table-column>
        <el-table-column property="path" label="路径">
        </el-table-column>
        <el-table-column property="level" label="权限等级" >
          
          <template slot-scope="scope">
        <el-tag
          :type="colorFn(scope)"
          disable-transitions>{{scope.row.level|level}}</el-tag>
      </template>
        </el-table-column>

      </el-table>

    </div>


  </div>
</template>

<script>
import { RightsAPI } from '@/api'
export default {
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    indexMethod(index) {
      return index * 2;
    },
   
    colorFn(scope){
      console.log(scope);
      if (scope.row.level === '0') {
        return 'primary'
      } else if (scope.row.level === '1') {
        return 'success'
      } else {
        return 'danger'
      }
    }
    // scope.row.tag === '家' ? 'primary' : 'success'
  },
  async created() {
    const res = await RightsAPI()
    console.log(res);
    this.tableData = res.data.data
  },
  filters:{
    level(val1){
      console.log(val1);
      if (val1 === '0') {
        return '一级'
      } else if (val1 === '1') {
        return '二级'
      } else {
        return '三级'
      }
    }
  }
}
</script>

<style scoped>
.el-breadcrumb{
  position: relative;
  z-index: 1;
}
.box {
  /* width: 100%; */
  background-color: #fff;
  margin-top: 0.8em;
  padding: 1em;
}
.com{
   display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}
.one{
  background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    color: #409eff;

}
.two{
  background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
   
}
.three{
  background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
   
}
</style>